<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件处理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件绑定注意事项：
						1.事件的回调都配置在methods对象中
						2.methods中的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
						3.methods中的配置的函数，不要用箭头函数！！！！，否则this丢失
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{school}}学习</h2>

			<!-- 绑定事件---标准方式 -->
			<button v-on:click="show1">点我提示：信息1（v-on绑定）</button> <br/><br/>

			<!-- 绑定事件---简写方式 -->
			<button @click="show1">点我提示：信息1（@绑定）</button> <br/><br/>

			<!-- 绑定事件---传递参数 -->
			<button @click="show2($event,666)">点我提示：信息2 + 传递的参数</button> <br/><br/>

			<!-- 绑定事件---阻止默认行为，prevent叫事件修饰符 -->
			<a href="https://www.baidu.com" @click.prevent="show3">点我提示：信息3 （阻止默认行为）</a> <br/><br/>

			<!-- 绑定事件---阻止冒泡，事件修饰符可以连写，且顺序可以随意改变 -->
			<div @click="show4">
				<a href="https://www.baidu.com" @click.stop.prevent="show4">点我提示：信息4 （阻止冒泡）</a>
			</div><br/>

			<!-- 键盘事件 -->
			<input @keyup.enter="show5" type="text" placeholder="按下回车提示数据">
			<!-- <input @keyup.13="show5" type="text" placeholder="按下回车提示数据"> -->
			<!-- <input @keyup.37="show5" type="text" placeholder="按下左箭头提示数据"> -->
			<!-- <input @keyup.arrow-left="show5" type="text" placeholder="按下左箭头提示数据"> -->
			<!-- <input @keyup.left="show5" type="text" placeholder="按下左箭头提示数据"> -->
			<!-- <input @keyup.16="show5" type="text" placeholder="按下shift提示数据"> -->
			
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{ //配置数据
					school:'尚硅谷',
				},
				methods:{ //用于配置方法
					show1(event){ //此处的show1一定一定不要写成箭头函数，否则this就是Window了
						//console.log(this) //this是vm
						//console.log('信息1',event.target.innerText)
						alert('信息1')
					},
					show2(event,number){
						console.log(event)
						alert('信息2---'+number)
					},
					show3(event){
						//event.preventDefault(); //靠程序员手动阻止默认行为
						alert('信息3')
					},
					show4(event){
						// event.stopPropagation(); //靠程序员手动阻止冒泡
						alert('信息4')
					},
					show5(event){
						// if(event.keyCode !== 13) return //靠程序员自己判断按键
						// console.log(event.keyCode) //输出按键编码值
						// console.log(event.key) //输出按键名称
						alert(event.target.value) 
					}
				}
			})

		</script>
	</body>
</html>